<template>
  <div class="activity-explain-box">
    <div class="activity-explain-warpper">
      <div class="activity-banner-box">
        <img class="activity-big-img" src="../../../images/explain_banner.png" />
      </div>
      <!-- 活动说明 -->
      <div class="knife_container explain-box">
        <div class="">
          <img src="../../../images/explain1.png" class="mar-bt100" alt="">
          <p id="fullcourt" class="opacity0">定位到这个元素</p>
          <img src="../../../images/explain2.png"  class="mar-bt100" alt="">
          
        </div>
      </div>
      <!-- weekActivity -->
      <template v-if="activityClose">
        <div class="act-show-box">
          <!-- <p class="text1">数量有限 先到先得</p> -->
          <div class="count-down-box">
            <div class="count-down-time">
              <div class="count-time-ing pointer">
                【活动一】已结束
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
      <div class="act-show-box" v-if="weekActivity">
         <p class="text1">数量有限 先到先得</p>
        <div class="count-down-box">
          <router-link tag="div" :to="{name: 'ActivitySeptArea'}" class="count-down-time">
            <div class="count-time-ing pointer">
              点击进入专区
            </div>
          </router-link>
        </div>
      </div>
       <div class="act-show-box" v-else>
          <p class="text1" >距离开始还剩</p>
        <div class="count-down-box">
          <div class="count-down-time">
            <template v-if="dayNum > 1">
             <span class="count-time">{{timerresult.substr(0,1)}}</span>
             <span class="count-time count-day">天</span>
            </template>
            <template v-else>
              <span class="count-time">{{timerresult.substr(2,1)}}</span>
              <span class="count-time">{{timerresult.substr(3,1)}}</span>
              <span class="count-colon">:</span>
              <span class="count-time">{{timerresult.substr(5,1)}}</span>
              <span class="count-time">{{timerresult.substr(6,1)}}</span>
              <span class="count-colon">:</span>
              <span class="count-time">{{timerresult.substr(8,1)}}</span>
              <span class="count-time">{{timerresult.substr(9,1)}}</span>
            </template>
          </div>         
        </div>
        <p class="text2">数量有限 先到先得</p>
      </div>
      </template>
      
    </div>
    <div class="activity-progress-box-bt" :style="{height: `${progressH}px`}">
    <div class="activity-progress-box-bg" ref="progressRef">
      <div class="activity-progress-box" >
        <span class="el-icon-d-arrow-right activity-arrow" ref="arrowRef" @click="progressClick"></span>
        <div class="cursor-box" :style="{'left': `calc(${barWidth} - 125px)`}" v-if="discountActivity">
          <template v-if="level !== 4">
              还需购{{needAmount | floatPrices}}元 可直降{{discountActivity.nextDiscount | tofiexed}}个点
          </template>
          <template v-else>
            获全场最高折扣，可直降{{discountActivity.nowDiscount | tofiexed}}个点
          </template>
        </div>
        <div class="procurement_progress">
          <div class="progress_tag">
            <div class="dot">
              <p>0元</p>
            </div>
            
            <template v-for="(item, ind) in disocuntlist">
              <div class="dot">
                <p>{{item.amount}}元 <span class="discount">(可直降{{item.discount | tofiexed}}个点)</span></p>
                <p ></p>
              </div>
            </template>
          </div>
          <!-- :class="{'active': levelInfo.level > ind || levelInfo.level === 0}" :style="{'left':levelWidthArr[ind]}" -->
          <div class="progress_bar">
            <span class="dot"></span><span class="dot"></span><span class="dot"></span>
            <div class="progress_fill" :style="{width: barWidth}"></div>
          </div>
        </div>
        <div class="txt-center" style="padding-top: 20px;" v-if="progressFloat && discountActivity">
          <span class="discount-text-box" v-if="!level">
            您未获得9月21日-9月30日全场商品折扣点
            <!-- 您已获得<em class="redfont">最高折扣</em>，即可享9月21日-9月30日全场商品<em class="redfont">直降{{discountActivity.nowDiscount | tofiexed}}个点</em>活动 -->
          </span>
          <span class="discount-text-box" v-else>
            您已获得9月21日-9月30日全场商品直降{{discountActivity.nowDiscount | tofiexed}}个点
            <!-- 您已采购了 {{discountActivity.amount}}元 商品，你可以在9月20日之前购买{{needAmount | floatPrices}}元商品，即可享9月21日-9月30日全场商品 <em class="redfont">直降{{discountActivity.nextDiscount | tofiexed}}个点</em> 活动 -->
          </span>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import {countDown, throttle} from '@/tool/tool'
import {mapState, mapActions} from 'vuex'
export default {
  data () {
    return {
      timerresult: '',
      weekActivity: false,
      openedActList: null,
      dayNum: 0,
      disocuntlist: [
        {'discount': 0.99, amount: 10000},
        {'discount': 0.985, amount: 20000},
        {'discount': 0.97, amount: 30000},
        {'discount': 0.96, amount: 60000}
      ],
      nextDiscount: 0,
      needAmount: 0,
      currentAmount: 0,
      progressFloat: true,
      level: 0,
      nowDiscount: 0,
      progressH: 198,
      nowAmount: 0,
      activityClose: false // 活动一关闭
    }
  },
  computed: {
    ...mapState({
      'discountList': state => state.activity.discountList,
      'discountActivity': state => state.activity.discountActivity
    }),
    barWidth () {
      if (!this.discountActivity) return
      // this.nowAmount = this.discountActivity.amount
      let leftProgress
      if (!this.discountActivity.nextDiscount) {
        this.level = 4
        return '100%'
      } else {
        this.disocuntlist.forEach((item, idx) => {
          if (item.amount === this.discountActivity.nextAmount) {
            this.level = idx
          }
        })
      }
      let amount = this.discountActivity.amount
      let nextAmount = this.discountActivity.nextAmount
      let nowAmount = this.discountActivity.nowAmount
      this.needAmount = this.discountActivity.nextAmount - amount
      leftProgress = (amount - nowAmount) / (nextAmount - nowAmount)
      return (25 * (this.level + leftProgress)) + '%'
    }
  },
  methods: {
    ...mapActions(['fetchOpenActivity', 'fetchDiscountActivity']),
    progressClick () {
      this.progressFloat = !this.progressFloat
      if (this.progressFloat) {
        this.$refs.arrowRef.className = 'el-icon-d-arrow-right activity-arrow '
        this.progressH = 253
      } else {
        this.$refs.arrowRef.className = 'el-icon-d-arrow-right activity-arrow arrow-up'
        this.progressH = 198
      }
    },
    // 倒计时 2018-09-10 2018-09-30
    startCountFn (timeParm) {
      var vm = this
      var timer = setInterval(function () {
        vm.timerresult = countDown(timeParm)
        if (vm.timerresult + '' === 'false') {
          window.clearInterval(timer)
          vm.activityTime()
        }
        vm.dayNum = vm.timerresult.substr(0, 1)
      }, 1000)
      vm.globalTimer = timer
    },
    activityTime () {
      console.log('8888')
      this.fetchOpenActivity().then(res => {
        console.log(res)
        this.openedActList = (res && res[0]) || []
        let timeParm
      // 周周活动结束
        if (!('id' in this.openedActList)) {
          this.activityClose = true
          return
        }
        timeParm = this.openedActList.startTime
        // timeParm = '2018-09-05 00:00:00'
        const timeStarStamp = (new Date(timeParm.replace(/-/g, '/'))).getTime()
        let nowTime = (new Date()).getTime()
        // 周周活动进行时
        if (nowTime > timeStarStamp) {
          this.weekActivity = true
          return
        }
        // 周周活动倒计时
        this.weekActivity = false
        this.startCountFn(timeParm)
      })
    },
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
        setTimeout(() => {
          window.scrollTo(savedPosition.x, savedPosition.y)
        }, 200)
      }
    }

  },
  mounted () {
    this.activityTime()
    this.fetchDiscountActivity()
    let vm = this
    setTimeout(function () {
      let progress = vm.$refs.progressRef
      window.onscroll = throttle(function () {
        var clientH
        var scrollH
        var scrollT
        var bottomH
        if (document.documentElement) {
          clientH = document.documentElement.clientHeight
          scrollH = document.documentElement.scrollHeight
        } else if (document.body) {
          clientH = document.body.clientHeight
          scrollH = document.body.scrollHeight
        }
        scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
        bottomH = scrollH - clientH - scrollT

        if (bottomH > 450) {
          progress.className = 'activity-progress-box-bg progress-fixed'
        } else {
          progress.className = 'activity-progress-box-bg'
        }
      }, 100)
    }, 100)
  },
  beforeDestroy () {
    clearInterval(this.globalTimer)
  },
  // 离开页面触发的方
  destroyed () {
    window.onscroll = ''
  },
  watch: {
    // progressFloat (value) {
    //   let progress = this.$refs.progressRef
    //   if (value) {
    //     progress.className = 'activity-progress-box-bg'
    //   }
    // }
  },
  filters: {
    tofiexed (value) {
      let num = (1 - value) * 100
      return num.toFixed(1)
    }
  }

}
</script>

<style lang="scss" scoped>
  .activity-explain-warpper{
    background:linear-gradient(360deg,rgba(187,32,33,1) 0%,rgba(193,29,29,1) 100%);
    overflow: hidden;
    height: 3750px;
  }
  .activity-banner-box{
    padding-top: 50px;
    text-align: center;
  }
  .activity-big-img{
    // min-width: 1380px;
    width: 100%;
    max-width: 1470px;
    margin-left: -29px;
    height: auto;
  }
  .explain-box{
    position: absolute;
    top: 621px;
    left: 50%;
    margin-left: -600px;
  }
  .mar-bt100{
    margin-bottom: 100px;
  }
  .act-show-box{
    position: absolute;
    text-align: center;
    top: 1252px;
    left: 50%;
    margin-left: -332px;
    // padding: 36px 78px;
    font-size: 20px;
    color: #999999;
    overflow: hidden;
    width: 666px;
    .text1{
      font-size:28px;
      color:rgba(102,102,102,1);
      line-height:40px;
      margin-bottom: 20px;
    }
    .text2{
      color:rgba(153,153,153,1);
      line-height:33px;
      font-size:24px;
      padding-top: 20px;
    }
  }
    .count-down-box{
      display: inline-block;
    /* position: absolute; */
    text-align: right;
    right: 78px;
    width: 100%;
    }
    .count-down-text{
      font-size:20px;
      line-height:28px;
      color: #999999;
      margin-top: 11.8px;
    }
    .count-down-time{
    background:rgba(255,255,255,1);
    border:2px solid rgba(207,11,11,1);
    padding: 20px 18px;
    font-size: 0;
    text-align: center;
    .count-time{
      font-size: 95px;
      vertical-align: middle;
      display: inline-block;
      width: 88px;
      height: 118px;
      background: #cf0b0b;
      line-height: 118px;
      color: white;
      text-align: center;
      margin-right: 7px;
      &:last-child{
        margin-right: 0;
      }
    }
    
    .count-colon{
       font-size: 80px;
      padding: 0 6px 0 1px;
      color: #CF0B0B;
      vertical-align: middle;
      // margin: 0 -30px;
    }
    .count-time-ing{
      background:rgba(207,11,11,1);
      height: 118px;
      line-height: 118px;
      font-size:60px;
      color:rgba(255,255,255,1);
      text-align: center;
    }
    .count-day{
      font-size: 80px;
      margin-right: 20px;
    }
  }
  .activity-progress-box-bt {
    background: linear-gradient(360deg, #c11d1d, 0%, #bb2021 0%);
    height:198px;
  }
  .activity-progress-box-bg{
    position: absolute;
    width: 100%;
    color: white;
    bottom: 0;
    background: rgba(0,0,0,.6);
    // height: 247px;
    padding: 12px 0 20px;
    box-sizing: border-box;
    transition: all 0.3s;
  }
  .activity-progress-box{
    width: 1020px;
    color: white;
    // margin: 0 auto;
    margin: 10px auto 0;
    position: relative;
  }
  .activity-arrow{
    transform: rotate(90deg);
    right: 10px;
    position: absolute;
    top: -20px;
    color: #d8d8d8;
    font-size: 20px;
    cursor: pointer;
  }
  .procurement_progress{
    position: relative;
    margin-bottom: 28px;
    // height: 90px;
    .progress_tag{
      position: relative;
      // height: 90px;
      padding-top: 28px;
      line-height: 25px;
      .dot{
        position:absolute;
        display: inline-block;
        margin-left: -10px;
        text-align: center;
        &:nth-child(1){
          left: 1%;
        }
        &:nth-child(2){
          left: 25%;
          margin-left: -60px;
        }
        &:nth-child(3){
          left: 50%;
          margin-left: -63px;
        }
        &:nth-child(4){
          left: 75%;
          margin-left: -83px;
        }
        &:nth-child(5){
          right: 0;
          text-align: right;
        }
      }
      .discount{
        font-size:13px;
        color:rgba(255,255,255,1);
      }
    }
    .progress_bar{
      position: absolute;
      top: 14px;
      width: 100%;
      overflow: hidden;
      height: 6px;
      background: rgba(194,194,194,1);
      .dot{
        z-index: 5;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #878787;
        display: inline-block;
        position: absolute;
        
        &:nth-child(1){
          left: 25%;
        }
        &:nth-child(2){
          left: 50%;
        }
        &:nth-child(3){
          left: 75%;
        }
      }
      .active{
        background: #CBA200;
      }
    }
    .progress_fill{
      position: absolute;
      left: 0;
      top: 0;
      background: #FF0002;
      /* border-radius: 7px; */
      width: 40%;
      height: 6px;
      z-index: 1;
    }
  }
  .cursor-box{
    position: relative;
    display: inline-block;
    color:rgba(255,255,255,1);
    font-size:14px;
    line-height:22px;
     background: #ff0002;
    border-radius: 8px;
    padding: 7px 0;
    width: 240px;
    box-sizing: border-box;
    text-align: center;
    &:after{
      position: absolute;
      bottom: -17px;
      left: 50%;
      content: '';
      border: 8px solid transparent;
      border-top: 10px solid #ff0002;
      height: 0;
      width: 0;
    }
  }
  .discount-text-box{
    background: rgba(255,255,255,1);
    border-radius: 30px;
    padding: 8px 32px;
    color: rgba(51,51,51,1);
    line-height: 22px;
    text-align: center;
    font-size: 14px;
    display: inline-block;
    margin: 0 auto;
    .redfont{
      color: #BB2021;
      font-size: 16px;
    }
  }
  .progress-fixed{
    position: fixed;
    z-index: 5;
  }
  .arrow-up{
    transform: rotate(-90deg);
  }
</style>
